<template>
  <!-- 牌型统计 -->
  <div class="app-container">
    <div class="app-wrap" style="height: 100%;">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="渠道:" label-width="50px">
            <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
              <el-option label="全部" value="" ></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期时间:" prop="dateTime" label-width="80px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="date" 
            class="full-width-input time-box" :clearable="false"/>
          </el-form-item>
          <!-- <el-form-item label="游戏类型:" label-width="80px">
            <el-select v-model="listQuery.game_id" placeholder="请选择游戏类型" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in GAME_TYPE" :key="index" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="游戏房间:" label-width="90px">
            <el-select v-model="listQuery.room_config_id" placeholder="请选择游戏房间" filterable @change="chooseGameRoom">
              <el-option label="全部" :value="0" ></el-option>
              <div v-if="listQuery.game_id">
                <el-option v-show="listQuery.game_id==item.game_id?true:false" :label="item.game_id==1?'【'+item.a_base_room_id+'】号房间 ('+'T'+')':'【'+item.a_base_room_id+'】号房间 ('+'R'+')'" :value="item.a_base_room_id" v-for="(item, index) in roomData" :key="index"></el-option>
              </div>
              <div v-else>
                <el-option :label="item.game_id==1?'【'+item.a_base_room_id+'】号房间 ('+'T'+')':'【'+item.a_base_room_id+'】号房间 ('+'R'+')'" :value="item.a_base_room_id" v-for="(item, index) in roomData" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="杀率:" label-width="50px">
            <el-select v-model="listQuery.kill_type" placeholder="请选择杀率类型" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in killDataList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="玩家类型:" label-width="90px">
            <el-select v-model="listQuery.is_cash_mode" placeholder="请选择玩家类型" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in playerDataList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="牌局类型:" label-width="90px">
            <el-select v-model="listQuery.is_a_mode" placeholder="请选择牌局类型" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in leopardDataList" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:actions >
          <div class="flexDetween">
            <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button> 
            <el-button type="primary" size="mini" icon="el-icon-download"  :disabled="!dataList.length" @click="getExport">导出</el-button> 
          </div>
        </template>
        <template>
          <el-table-column prop="date" label="日期" align="center" width="150"/>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{!scope.row.agent_id?'汇总':scope.row.agent_id?'【'+scope.row.agent_id+'】'+$public.channelLabel(scope.row.agent_id):'' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="game_id" label="游戏类型" width="120">
            <template slot-scope="scope">
              <span>{{ gameType(scope.row.game_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="room_config_id" label="房间号" align="center" width="150">
            <template slot-scope="scope">
              <span>【{{ scope.row.room_config_id }}】号房间</span>
            </template>
          </el-table-column>
          <el-table-column prop="kill_type" label="杀率类型" align="center" width="120">
            <template slot-scope="scope">
              <el-tag :type="killType(scope.row.kill_type)">{{ killLabel(scope.row.kill_type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_cash_mode" label="玩家类型" align="center" width="120">
            <template slot-scope="scope">
              <el-tag :type="playerType(scope.row.is_cash_mode)">{{ playerLabel(scope.row.is_cash_mode) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="game_num" label="局数" align="center" width="120"/>
          <el-table-column prop="game_win_num" label="玩家赢局" align="center" width="120"/>
          <el-table-column prop="game_lose_num" label="玩家输局" align="center" width="120"/>
          <el-table-column prop="game_win_round" label="玩家赢局轮次平均值" align="center" width="150">
            <template slot-scope="scope">
              <div class="flexCenter">
                <span v-show="!scope.row.game_win_num">0</span>
                <span v-show="scope.row.game_win_num">{{ $public.mathNumberDivide(scope.row.game_win_round,scope.row.game_win_num)  }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="game_lose_round" label="玩家输局轮次平均值" align="center" width="150">
            <template slot-scope="scope">
              <div class="flexCenter">
                <span v-show="!scope.row.game_lose_num">0</span>
                <span v-show="scope.row.game_lose_num">{{ $public.mathNumberDivide(scope.row.game_lose_round,scope.row.game_lose_num)  }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="is_a_mode" label="是否A豹局" align="center" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_a_mode?'danger':'info'">{{ scope.row.is_a_mode?'A豹局':'普通局' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="run_robot_avg_round" label="陪跑机器人结束对局平均值" align="center" width="200">
            <template slot-scope="scope">
              <div class="flexCenter">
                <span v-show="!scope.row.run_robot_count_round">0</span>
                <span v-show="scope.row.run_robot_count_round">{{ $public.mathNumberDivide(scope.row.run_robot_sum_round,scope.row.run_robot_count_round)  }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="card_type_1" label="非同花杂牌<8/占比" align="center" width="160">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.card_type_1 }}【<div class="colorRed width60px">{{ scope.row.ratio_type_1 }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="card_type_2" label="非同花杂牌<Q/占比" align="center" width="160">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.card_type_2 }} 【<div class="colorRed width60px">{{ scope.row.ratio_type_2 }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="card_type_3" label="非同花杂牌>=Q/占比" align="center" width="160">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.card_type_3 }} 【<div class="colorRed width60px">{{ scope.row.ratio_type_3 }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="card_type_4" label="对子<Q/占比" align="center" width="160">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.card_type_4 }} 【<div class="colorRed width60px">{{ scope.row.ratio_type_4 }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="card_type_5" label="对子>=Q/占比" align="center" width="160">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.card_type_5 }} 【<div class="colorRed width60px">{{ scope.row.ratio_type_5 }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="card_type_6" label="同花/占比" align="center" width="160">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.card_type_6 }} 【<div class="colorRed width60px">{{ scope.row.ratio_type_6 }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="card_type_7" label="顺子/占比" align="center" width="160">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.card_type_7 }} 【<div class="colorRed width60px">{{ scope.row.ratio_type_7 }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="card_type_8" label="同花顺/占比" align="center" width="160">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.card_type_8 }} 【<div class="colorRed width60px">{{ scope.row.ratio_type_8 }}%</div>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="card_type_9" label="豹子/占比" align="center" width="160">
            <template slot-scope="scope">
              <div class="flexCenter">
                {{ scope.row.card_type_9 }} 【<div class="colorRed width60px">{{ scope.row.ratio_type_9 }}%</div>】
              </div>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getStatistics,
  getStatisticsExport,
  getGameReportRoom
} from '@/api/statistics'
import {
  GAME_TYPE,
} from '@/utils/enum'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'cardStatistics',
  components: {
    SearchTable
  },
  data () {
    return {
      GAME_TYPE,
      channelData: this.$store.state.commonState.channelDataArray,
      listLoading: true,
      dataList: [],
      listQuery: {
        page: 1,
        size: 50,
        agent_id:'',
        game_id: 1,
        room_config_id:0,
        kill_type:-1,
        is_cash_mode:-1,
        is_a_mode:-1,
        dateTime:this.$public.getDateDay(0),
        start_time: '',
        end_time: '',
      },
      currentTotal: 0,
      roomData:[],
      killDataList:[
        {label:'全部',value:-1},
        // {label:'正常玩家局',value:0,type:'primary'},
        {label:'玩家赢局',value:1,type:'success'},
        {label:'杀率局',value:2,type:'danger'},
        {label:'大杀率',value:4,type:'info'},
        {label:'随机局',value:16,type:''},
      ],
      playerDataList:[
        {label:'全部',value:-1},
        {label:'新手玩家',value:0,type:'success'},
        {label:'正常玩家',value:1,type:'primary'},
      ],
      leopardDataList:[
        {label:'全部',value:-1},
        {label:'A豹局',value:1,type:'success'},
        {label:'非A豹局',value:0,type:'primary'},
      ],
    }
  },
  created () {
    // this.getDataList();
    // this.getGameReportRoomList();
    // this.chooseGameRoom(1)
  },
  activated () {
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getDataList();
    this.getGameReportRoomList();
    this.chooseGameRoom(1)
  },
  methods: {
    // 牌型统计
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = [];
      that.checkedItem = null;
      if (params.dateTime) {
        params.start_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 00:00:00'
        params.end_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 23:59:59'
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response = await getStatistics(params)
      if (response.code == 1) {
        if (response.data.list) {
          response.data.list.forEach(item=>{
            item.date=item.date.substr(0,10)
            const keyObj={
              ratio_type_1:'card_type_1',//非同花杂牌<8
              ratio_type_2:'card_type_2',//非同花杂牌<Q
              ratio_type_3:'card_type_3',//非同花杂牌>=Q
              ratio_type_4:'card_type_4',//对子<Q
              ratio_type_5:'card_type_5',//对子>=Q
              ratio_type_6:'card_type_6',//同花
              ratio_type_7:'card_type_7',//顺子
              ratio_type_8:'card_type_8',//同花顺
              ratio_type_9:'card_type_9',//豹子
            }
            Object.keys(keyObj).forEach(key=>{
              if(!item.game_num){
                item[key]=0
              }else{
                item[key]=that.$public.mathNumberDividePercent(item[keyObj[key]],item.game_num)
              }
            })
          })
          that.dataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 游戏房间
    async getGameReportRoomList(){
      let that = this,params = JSON.parse(JSON.stringify(that.listQuery));
      that.roomData = []
      if (params.dateTime) {
        params.start_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 00:00:00'
        params.end_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 23:59:59'
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response = await getGameReportRoom(params)
      if (response.code == 1) {
        if(response.data){
          that.roomData = response.data
        }
      }else{
        that.$message.error(response.msg)
      }
    },
    // 游戏房间
    chooseGameRoom(val){
      let that=this;
      if(val){
        that.roomData.map(item=>{
          if(item.a_base_room_id==val){
            that.listQuery.game_id=item.game_id
          }
        })
      }else{
        that.listQuery.game_id=1
      }
    },
    // 导出
    getExport(){
      let that = this,serveUrl=process.env.VUE_APP_BASE_API.substring(0,process.env.VUE_APP_BASE_API.length-6);
      getStatisticsExport(that.listQuery).then(res => {
        if (res.code == 1) {
          window.open(serveUrl+res.data)
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 游戏类型展示
    gameType(cellValue){
      return (this.GAME_TYPE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 杀率类型展示
    killType(cellValue){
      return (this.killDataList.find((item) => item.value === cellValue)?.type || " ");
    },
    // 杀率展示
    killLabel(cellValue){
      return (this.killDataList.find((item) => item.value === cellValue)?.label || " ");
    },
    // 杀率类型展示
    playerType(cellValue){
      return (this.playerDataList.find((item) => item.value === cellValue)?.type || " ");
    },
    // 杀率展示
    playerLabel(cellValue){
      return (this.playerDataList.find((item) => item.value === cellValue)?.label || " ");
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        agent_id:'',
        game_id: 1,
        room_config_id:0,
        kill_type:-1,
        is_cash_mode:-1,
        is_a_mode:-1,
        dateTime:this.$public.getDateDay(0),
        start_time: '',
        end_time: '',
      },
      this.getDataList();
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>

</style>
